// 副作用 useEffect
import { useState, useMemo } from 'react'
function UseEffect1() {
  let [count, setCount] = useState(0)

  // 第一种情况：
  // useEffect在函数第一次加载的时候就会执行一次  每次页面数据更新触发组件更新的时候也会执行（通俗说就行页面绑定的数据进行改变，视图更新的时候）
  // useEffect(() => {
  //   // 副作用
  //   document.title = '标题修改' + count
  //   console.log('被执行了')
  // })

  // 第二种情况：指定依赖项为空 传递了第二参数(数组)   []
  // 第一加载的时候会触发一次  后面数据更新触发组件更新也不会触发
  // useEffect(() => {
  //   // 副作用
  //   document.title = '标题修改' + count
  //   console.log('被执行了')
  // }, [])

  //指定依赖项不为空   传递的数组里面存放要会改变的变量   只有当这个变量改变的时候就会触发这个useEffect
  // 注意  只要函数内部使用到的变量   都必须加到依赖项上面
  // useEffect(() => {
  //   // 副作用
  //   document.title = '标题修改' + count
  //   console.log('被执行了')
  // }, [count])

  // useMemo 计算属性  修改a  c也会自己进行计算改变
  // 需要传递依赖项 不然数据 a/b 改变了 c不会改变
  // 函数第一次加载的时候 会触发一次   依赖项改变了也会触发

  let [a, setA] = useState(10)
  let [b, setB] = useState(20)

  const c = useMemo(() => {
    console.log('useMemo被触发了')
    return a + b
  }, [a, b])

  return (
    <>
      <p>{count}</p>
      <button
        onClick={() => {
          setCount(count + 1)
        }}
      >
        点我
      </button>

      <hr />
      <p>计算属性</p>
      <p>{a}</p>
      <p>{b}</p>
      <p>{c}</p>
      <button onClick={() => setA(a + 10)}>修改a</button>
    </>
  )
}

export default UseEffect1
